
<template>
      <div id="my_dynamic">
		<magic-header titleName="我的动态"></magic-header>
        <section>
            <div v-if="hasDynamic && loadEnd" class="head">
                <ul>
                    <li><img :src="headUrl" alt="" class="headImg"></li>
                    <li class="userName"><img v-show="this.$.userId" class="gender" :src="icon" alt=""><span>{{userName}}</span></li>
                </ul>
            </div>
        </section>
        <section>
            <loadmore :getMore="loadMyDynamic">
          <div v-for="(item, index) in myDynamic" :key="index">
            <dynamic :itemData="item" @removeSuccess="removeDynamic(index,myDynamic)"></dynamic>
          </div>
        </loadmore>
        </section>
        <empty v-if="!hasDynamic" message="暂无动态"></empty>
  </div>
</template>
<script>
import magicHeader from "components/magicHeader";
import femal from "assets/femal.png";
import male from "assets/male.png";
import loadmore from "components/loadmore";
import dynamic from "components/myDynamic/my_dynamic";
import my_dynamic from "services/vfhz/my_dynamic";
import empty from "components/empty-page-vfhz";
const COUNT = '5'
export default {
  data() {
    return {
      male: male,
      femal: femal,
      icon:'',
      myDynamic: [],
      index: 1,
      now: "",
      userName: "登录后可查看我的动态~",
      headUrl: femal,
      hasDynamic: true,
      loadEnd: false
    };
  },
  created() {
    this.now = this.getTime();
    let vm = this;
    my_dynamic.bind(this)(
      {
        beginTime: this.now,
        count: COUNT,
        personalId: this.$.userId,
        methodName: "QueryPersonalSpace"
      },
      res => {
        if (res.spaces.length > 0) {
        this.userName = res.userName;
        this.icon = res.genderIcon;
        if(res.hasHead){
          res.head = this.addPath(res.headUrl)
        }
        this.headUrl = res.headUrl;
        //修改now用于刷新参数
        vm.now = res.spaces[res.spaces.length - 1].publishDate;
        for (var i = 0; i < res.spaces.length - 1; i++) {
          if (res.spaces[i].showTime === res.spaces[i + 1].showTime) {
            res.spaces[i + 1].isShowTime = false;
          }
        }
        vm.myDynamic = res.spaces;
        }else{
          this.hasDynamic = false;
        }
        this.loadEnd = true;
      },
      err => {
        this.$.toast(err);
      }
    );
  },
  methods: {
    loadMyDynamic() {
      let vm = this;
      my_dynamic.bind(vm)(
        {
          beginTime: vm.now,
          count: COUNT,
          personalId: vm.$.userId,
          methodName: "QueryPersonalSpace"
        },
        res => {
          if (res.spaces.length === 0) {
            vm.$.toast("没有更多动态了!");
          } else {
            vm.now = res.spaces[res.spaces.length - 1].publishDate;
            if ( res.spaces[0].showTime === vm.myDynamic[vm.myDynamic.length - 1].showTime ) {
              res.spaces[0].isShowTime = false;
            }
            for (var i = 0; i < res.spaces.length - 1; i++) {
              if (res.spaces[i].showTime === res.spaces[i + 1].showTime) {
                res.spaces[i + 1].isShowTime = false;
              }
              vm.myDynamic.push(res.spaces[i]);
            }
            vm.myDynamic.push(res.spaces[4]);
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    getTime() {
      var d = new Date();
      var yy = d.getFullYear();
      var mm = d.getMonth() + 1;
      var dd = d.getDate();
      var hh = d.getHours();
      var MM = d.getMinutes();
      var ss = d.getSeconds();
      var time = yy +  "-" +  (mm > 9 ? mm : "0" + mm) +  "-" +  (dd > 9 ? dd : "0" + dd) +  " " +  hh +  ":" +  MM +  ":" +  ss;
      return time;
    },
    // removeDynamic(index, list) {
    //   list.splice(index, 1);
    // }
  },
  components: {
    magicHeader,
    dynamic,
    loadmore,
    empty
  }
};
</script>
<style scoped="scoped" lang="scss">
#my_dynamic {
  .head {
    display: flex;
    height: 160px;
    width: 100vw;
    background-size: contain;
    background-image: url("../../assets/my-dynamic-bg.png");
    ul {
      padding-top: 20px;
      width: 100%;
      height: 100%;
      text-align: center;
      .headImg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #fff;
      }
      .userName {
        padding-top: 10px;
        height: 23px;
        line-height: 23px;
        img {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          height: 23px;
          line-height: 23px;
          font-size: 16px;
        }
      }
    }
  }
  .result_empty {
    height: calc(100vh - 50px);
    z-index: 10000;
  }
  #loadMore {
    padding-top: 20px;
  }
}
</style>
<style>
    .item-content{
      width: 26vw!important;
      height: 26vw!important;
    }
</style>
